<template>
    <div>
         <div class="newsinfo-content" v-for="item in news" :key="item.id">
            <h3>{{ item.title }}</h3>
            <p class="newsinfo-content-p"><span>发布时间: {{item.add_time| filters }}</span> <span>点击: {{item.click}}次</span></p>
            <hr> 
            <div v-html="item.content" class="html-div"></div>
             <comment :id="item.id"> </comment>
         </div>

        
    </div>
    
</template>

<script>
import comment from '../../subcomponent/comment.vue'
import { Toast } from 'mint-ui'
    export default {
        data: function(){
            return {
                id: this.$route.params.id,
                news: ''
            }
        },
         created: function(){
                this.getnews()
            },
        methods: {
            getnews: function(){
                this.$http.get(`http://127.0.0.1:4000/news?id=${this.id}`).then(function(res){
                    
                    if(res.status != 200 || res.ok != true){
                        Toast('获取失败')
                    }else{
                        console.log(res.body)
                        this.news = res.body.news
                    }
                })
            }
        },
        components: {
            comment: comment
        }
    }

</script>

<style lang="scss">
    .newsinfo-content {
        h3 {
            padding: 6px 0;
            font-size: 18px;
            text-align: center;
            color: red;
        }
        .newsinfo-content-p {
                font-size: 14px;
                color: #007ACC;
                 display: flex;
                 justify-content: space-between;
        }
        hr {
            background-color: #ccc;
        }
        .html-div {
            img {
                width: 100%;
            }
            p{
                text-indent: 2em;
            }
        }
    }
</style>